<div class="random-user">
    <div>
        <span>本次添加用户个数: <input type="number" v-model="resultNum"></span>
        <button @click="isMore = !isMore">更多条件</button>
        <button @click="GetData">添加</button>
        <span v-show="IsLoading" style="color: darkred">加载中.....</span>
        <div v-show="isMore">
            <p><label>
                <span>性别: </span>
                <select v-model="gender">
                    <option value="ALL">全部</option>
                    <option value="male">男</option>
                    <option value="female">女</option>
                </select>
            </label></p>
            <p>
                <label>
                    <span>国籍: </span>
                    <select v-model="nationality">
                        <option v-for="(value, key) in nationalities" :value="key">{{value}}</option>
                    </select>
                </label>
            </p>
        </div>
    </div>
    <br/><br/>
    <table>
        <thead>
        <tr>
            <th>索引</th>
            <th>头像</th>
            <th>姓名</th>
            <th>性别</th>
            <th>电邮</th>
            <th>电话</th>
            <th>国籍</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(user, idx) in userList">
            <td>{{idx + 1}}</td>
            <td><img :src="user.picture" :alt="user.name"/></td>
            <td>{{user.name}}</td>
            <td>{{user.gender}}</td>
            <td>{{user.email}}</td>
            <td>{{user.phone}}</td>
            <td>{{nationalities[user.nat]}}(<span style="color:#888888;">{{user.nat}}</span>)</td>
            <td>
                <button @click="deleteUser(idx)">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>